<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<!--需求
参数：
    账号：name eg:"zs"
    密码：pass eg:"123"
    性别：sex  eg:1   说明：男-1 女-2
    职业：job  eg:3   说明：web工程师-1 php工程师-2 java工程师-3
    证书：certificate eg:[1,2,3] 说明：学位证-1 普通话证-2 英语四级-3 计算机二级-4
    爱好：hobby  eg:[1,2,3] 说明: 看书-1 打游戏-2 唱歌-3 跳舞-4 
    备注：des eg:"本人哈哈哈"
    是否同意协议：isAgree eg:true 说明：同意-true,不同意-false
-->

<body>
    <div id="app">
        <h3>完整表单</h3>
        <div>user:{{user}}</div>
        <!-- 1.绘制静态页面 -->
        <div>一级分类：<select v-model="user.first_cateid">
            <option value="" disabled>--请选择--</option>
            <option v-for="item in first_cateid" :key="item.id" :value="item.id">{{item.name}}</option>
        </select></div>
        <div>二级分类：<select v-model="user.second_cateid">
            <option value="" disabled>--请选择--</option>
            <option v-for="item in second_cateid" :key="item.name" :value="item.name">{{item.name}}</option>
        </select></div>

        <div> 商品名称: <input type="text" v-model="user.goodsname"></div>
        <div> 商品价格: <input type="text" v-model="user.price"></div>
        <div> 市场价格: <input type="text" v-model="user.market_price"></div>
        <div>商品规格：
            <!-- 单选的下拉菜单
                <option value="1">普通话证</option>
                对于select来说，option中间的是给用户看的，value是选中后得到的值。
             -->
            <select v-model="user.specsid">
                <option value="" disabled>--请选择--</option>
                <option v-for="item in specsid" :key="item.id" :value="item.id">{{item.name}}</option>
            </select>
        </div>
        <div>商品属性：
            <select v-model="user.specsattr">
                <option v-for="item in specsattr" :key="item.name" :value="item.name">{{item.name}}</option>
            </select>
        </div>
        <div>是否新品：

            <label>
                <input type="radio" v-model="user.isnew" :value="1" name="sex">是
            </label>
            <label>
                <input type="radio" v-model="user.isnew" :value="0" name="sex">否
            </label>
        </div>
        <!-- textarea 也是使用v-model -->
        <div>是否热卖：

            <label>
                <input type="radio" v-model="user.isnot" :value="1" name="sex">是
            </label>
            <label>
                <input type="radio" v-model="user.isnot" :value="0" name="sex">否
            </label>
        </div>
        <div>
            <label>
                <input type="checkbox" v-model="user.status">同意协议
            </label>
        </div>
        <!-- user.isAgree 
                true- 不禁用，要false.
                false- 禁用，要true.
        
        -->
        <button @click="submit" :disabled="!user.status">提交</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                // 2.初始化页面数据
                // 职业列表数据
                first_cateid: [{
                    id: 0,
                    name: "家用电器"
                }, {
                    id: 1,
                    name: "美妆护肤"
                }, {
                    id: 2,
                    name: "电子产品"
                }, ],
                // 证书列表数据
                second_cateid: [{
                    id: 1,
                    name: "精华"
                }, {
                    id: 2,
                    name: "爽肤水"
                }, {
                    id: 3,
                    name: "美容仪"
                }, ],
                //爱好列表
                specsid: [{
                    id: 0,
                    name: "颜色"
                }, {
                    id: 1,
                    name: "大小"
                }, {
                    id: 3,
                    name: "尺寸"
                }],
                specsattr: [{
                    id: 1,
                    name: "红色"
                }, {
                    id: 2,
                    name: "黄色"
                }, {
                    id: 3,
                    name: "绿色"
                }, {
                    id: 4,
                    name: "紫色"
                }],
                //表单数据
                user: {
                    first_cateid: "",
                    second_cateid: "",
                    goodsname: "",
                    price: "",
                    market_price: [],
                    specsid: [],
                    specsattr: "",
                    isnew: '',
                    isnot: "",
                    status: false,
                },


            },
            methods: {
                submit() {
                    if (this.confirmPass !== this.user.pass) {
                        alert("两次密码不一致")
                        return;
                    }
                    console.log(this.user)
                }
            }
        })
    </script>
</body>

</html>